<!-- 父组件示例：展示如何接收子组件通过自定义事件传递的数据 -->
<script setup>
// 导入子组件 CustomSubComponent（局部组件，需显式导入）
import CustomSubComponent from "@/components/CustomSubComponent.vue";

// 从 Vue 中导入 ref 用于创建响应式数据
import { ref } from "vue";

// 创建响应式数据 number，初始值为 10
// 用于存储父组件的计数状态，将通过子组件的事件进行更新
const number = ref(10);

// 定义事件处理函数，用于接收子组件传递的数据并更新 number
// 参数 value 是子组件通过 emit 传递过来的值
const updatEmitCount = (value) => {
    // 将子组件传递的值累加到 number 上
    number.value += value;
}
</script>

<template>
    <!-- 显示父组件当前的 number 值 -->
    <p>父组件当前的值是：{{ number }}</p>

    <!--
        使用子组件 CustomSubComponent，并监听其触发的 updateCount 事件
        当子组件触发 updateCount 事件时，执行 updatEmitCount 函数处理数据
        这是 Vue 中"子传父"通信的核心方式：子组件触发事件，父组件监听并处理
    -->
    <CustomSubComponent @updateCount="updatEmitCount" />
</template>

<style scoped>
/* scoped 属性确保样式仅作用于当前父组件 */
/* 可添加样式优化父组件布局 */
p {
    margin: 10px 0;
    color: #333;
}
</style>